<!-- src/view/index.vue -->
<script setup>
import { ref, onMounted } from 'vue';
import router from '../router/indexMy.js';

const activeIndex = ref('1')

// 正确定义 loginAdmin 变量
const loginAdmin = ref({
  name: "未登录",
});

// 重新整理菜单数据结构，使其更加清晰和一致
const menuData = ref([
  {
    name: '人事管理',
    icon: 'Notebook',
    children: [
      { name: '员工列表', icon: 'UserFilled', path: "employee" },
      { name: '部门列表', icon: 'GobletSquareFull', path: "department" },
      { name: '考勤列表', icon: 'Clock', path: "attendance" },
      { name: '人力资源流程', icon: 'DataLine', path: "humanResourceManagement" }
    ]
  },
  {
    name: '设备管理',
    icon: 'Monitor',
    children: [
      { name: '设备列表', icon: 'Monitor', path: "equipment" },
      { name: '维护记录', icon: 'DocumentChecked', path: "maintenanceRecord" },
      { name: '状态监控', icon: 'DataAnalysis', path: "equipmentMonitoring" },
      { name: '维护管理流程', icon: 'DataLine', path: "equipmentMaintenance" }
    ]
  },
  {
    name: '库存管理',
    icon: 'Box',
    children: [
      { name: '库存列表记录', icon: 'List', path: "inventory" },
      { name: '原材料管理', icon: 'Document', path: "rawMaterial" },
      { name: '库存管理', icon: 'DataLine', path: "inventoryManagement" }
    ]
  },
  {
    name: '产品管理',
    icon: 'Goods',
    children: [
      { name: '产品管理流程', icon: 'List', path: "product" }
    ]
  },
  {
    name: '生产管理',
    icon: 'TrendCharts',
    children: [
      { name: '生产订单管理', icon: 'Document', path: "productionOrder" },
      { name: '生产计划管理', icon: 'Calendar', path: "productionSchedule" }
      // 移除生产流程项
    ]
  },
  {
    name: '采购管理',
    icon: 'ShoppingCart',
    children: [
      { name: '采购订单', icon: 'Document', path: "purchaseOrder" },
      { name: '供应商管理', icon: 'User', path: "supplier" }
    ]
  },
  {
    name: '智能工具',
    icon: 'Link',
    children: [
      { name: '通义千问助手', icon: 'MagicStick', path: "qwen" }
    ]
  }
]);

// 在组件挂载时从 localStorage 获取用户信息
onMounted(() => {
  // 检查登录状态
  const token = localStorage.getItem('token');
  if (!token) {
    router.push('/login');
    return;
  }

  const userInfo = localStorage.getItem('userInfo');
  if (userInfo) {
    try {
      const user = JSON.parse(userInfo);
      loginAdmin.value.name = user.name || "未知用户";
    } catch (e) {
      console.error('解析用户信息失败:', e);
    }
  }

  // 默认激活第一个菜单项
  router.push('/employee');
});

// 修改 handleSelect 函数，添加对重置密码的处理
function handleSelect(key, keyPath){
  if (key == 'logout'){
    logout();
  } else if (key == '1-2') {
    // 跳转到密码重置页面
    router.push('/password-reset');
  }
}

function handleMenu(key){
  if (!key) return;
  router.push('/' + key);
}

function logout(){
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
  router.push('/login');
}

const isCollapse = ref(false);
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 :ellipsis="false"
                 background-color="#f3f7ff"
                 text-color="#393939"
                 active-text-color="#ffd04b"
                 @select="handleSelect">

          <el-menu-item index="0">
            <img style="height: 80%" src="@/assets/FactoryLogo.jpg" alt="智能工厂" />
            <span style="padding-left: 50px; font-size: 24px; color:#393939;">智能时代工厂信息管理系统</span>
          </el-menu-item>
          <div class="flex-grow" />
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Stamp></Stamp></el-icon>
              {{ loginAdmin.name }}
            </template>

            <el-menu-item index="1-2">重置密码</el-menu-item>
            <el-menu-item index="logout">退出
              <el-icon><SwitchButton></SwitchButton></el-icon>
            </el-menu-item>
          </el-sub-menu>

        </el-menu>
      </el-header>
      <el-container>
        <!-- 修复 width 属性，应该传字符串而不是数字 -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <div style="height: 60px;line-height: 60px; text-align: right; color: #FFF; font-size: 20px; margin-right: 24px;">
            <el-icon @click="isCollapse=!isCollapse">
              <Expand v-if="isCollapse"></Expand>
              <Fold v-else></Fold>
            </el-icon>
          </div>
          <el-menu active-text-color="#ffd04b" background-color="#0c1d40" class="el-menu-vertical-demo"
                   default-active="0" text-color="#fff" :collapse="isCollapse"
                   @select="handleMenu">
            <!-- 动态生成菜单 -->
            <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="index.toString()">
              <template #title>
                <component
                    class="icons"
                    :is="menu.icon"
                    style="width: 1em; height: 1em; margin-right: 8px" >
                </component>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="(child, ind) in menu.children" :key="ind" :index="child.path">
                <el-icon><component
                    :is="child.icon">
                </component></el-icon>
                <span>{{ child.name }}</span>
              </el-menu-item>
            </el-sub-menu>

          </el-menu>
        </el-aside>
        <el-main class="main-content">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.flex-grow {
  flex-grow: 1;
}

.common-layout,
.el-container {
  width: 100%;
  height: 100vh;
}

.el-header {
  --el-header-padding: 0;
  --el-header-height: 80px;
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
  padding: var(--el-header-padding);
}

.el-menu--horizontal {
  height: 80px;
}

.el-aside {
  background-color: #0c1d40;
  transition: width 0.3s;
  height: calc(100vh - 80px);
}

.main-content {
  padding: 0px;
  height: calc(100vh - 80px);
  overflow: auto;
  background-image: url('@/assets/OIP-C.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.el-menu {
  border-width: 0px;
}

.el-menu-item {
  font-size: 16px;
}

.el-menu-demo {
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.el-sub-menu__title {
  font-size: 16px;
}
</style>